<template>
  <div>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import { onMounted } from "vue";
import { setTreeData } from "./store/utils/project";
import { addEvent } from "./utils/utils";
import { shortKey } from "./views/bus/hotkey";

onMounted(() => {
  addEvent(window, "contextmenu", (e: MouseEvent) => {
    e.preventDefault();
  });
  /* 设置文件放下 */
  addEvent(document, "drop", (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const files = e.dataTransfer?.files;
    if (!files) {
      return;
    }
    // div拖拽
    if (files.length === 0) {
      return;
    }
    if (files?.length > 1) {
      message.warn("暂时不支持多个文件拖拽");
      return;
    } else {
      var reader = new FileReader();
      var blob = new Blob([files[0]]);
      reader.readAsText(blob);
      reader.onload = () => {
        try {
          setTreeData(JSON.parse(reader.result as string));
        } catch (error) {
          message.error("文件导入出错,可能因为格式不对,请务必导入对应格式文件");
        }
      };
    }
  });
  /* 取消拖拽默认事件 */
  addEvent(document, "dragover", (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  });
});

/**
 * todo: 快捷键
 *
 */
shortKey();
</script>

<style lang="scss">
html,
body {
  background-color: #333333;
  user-select: none;
  overflow: hidden;

  .application {
    min-width: 1440px;
  }
  input,
  textarea {
    font-family: unset !important;
    &::placeholder {
      color: #666 !important;
    }
  }
}
* {
  font-family: unset !important;
}

input {
  height: 24px;
  line-height: 24px;
  line-height: 20px;
  padding: 0 7px;
  border-radius: 2px;
}
input,
textarea,
.ant-select-selector {
  background-color: transparent !important;
  color: #aaa !important;
  &::placeholder {
    color: #666;
  }
  border-color: #999 !important;
}
ul {
  list-style: none;
}
</style>
